<template>
  <div class="video-wrapper">
      <header class="video-header">
          <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>


            <v-btn icon>
                <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
      </header>
        <div class="video-overflow-box" >
            <ul class="video-content" v-touch="{
                    start,
                    end
                }"  

                :style="
                    {transform: 'translateY(-'+ (currentIndex)*100 +'vh)'}"
                :data-index="currentIndex+1"
                 >
                <Player class="video-item" v-for="(item, index) in arr" :key="item"
                    :mvid="item"
                    :index="index"
                 ></Player>
            </ul>
      </div>
  </div>
</template>

<script>

import Player from '@/components/video/Player';

export default {
    components: {
        Player
    },
    data(){
        return {
            arr: [],
            touchEvent: {
                x: 0,
                y: 0
            },
            currentIndex: 0
        }
    },

    methods: {
        start(e){
            console.log(e)
            console.log('start');
            this.touchEvent.x = e.touchstartX
            this.touchEvent.y = e.touchstartY
        },
        end(e){
            console.log(e)
            console.log('end')
            let offsetX = e.touchendX - this.touchEvent.x;
            let offsetY = e.touchendY - this.touchEvent.y;
            this.touchEvent = {
                x: 0,
                y: 0
            }

            if(Math.abs(offsetY) - Math.abs(offsetX) > 40){
                if(offsetY > 0) {
                    this.currentIndex = 
                        this.currentIndex === 0 ? 0 : 
                        this.currentIndex-1;
                }else{
                    this.currentIndex = 
                        this.currentIndex === this.arr.length - 1 ? this.arr.length - 1 :
                        this.currentIndex+1; 
                }
            }
        }
    },
    created(){
        if('ids' in this.$route.query) {
            this.arr = this.$route.query.ids.split(';');
        }
        if('cid' in this.$route.query) {
            let cid = this.$route.query.cid;
            this.currentIndex = this.arr.length > 0 ? 
                  this.arr.findIndex(i => i === cid)
                  : 0
        }
        
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global.scss';
    .video-wrapper {
        background-color: #222;
        height: 100%;
        .video-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            z-index: 1;
            width: 100%;
            background-color: rgba(255,255,255,.3);
        }

        .video-overflow-box {
            width: 100%;
            height: 100vh;  // 没有设置为 100vh是为了有一个默认的上下拖动效果，通过回正纠正
            overflow: hidden; 
            .video-content {
                transition: transform .4s ease;
                .video-item {
                    width: 100%;
                    height: 100vh;
                }
            }
        }

        
    }
</style>